<template>
    <section>
        <wioc-link-url tag="div" :href="Item.url"  v-for="(Item,index) in dataList" :key="index" >
            <div class="news":style="index==(dataList.length-1)? 'border-bottom:'+'unset':''">
                <ul class="left" :style="Item.image?'width:'+'65%':'width:'+'100%'">
                    <li  class="firli"  :style="Item.image?'width:'+'100%':''">{{Item.title}}</li>
                    <li class="secli">
                        <span class="time">{{Item.time|formatDate('yyyy-MM-dd')}}</span>

                        <div v-if="ifType">
                            <div v-if="Item.type==='无价值'" class="tag">{{Item.type}}</div>
                            <div v-else-if="Item.type==='高价值'" class="tagTwo">{{Item.type}}</div>
                            <div v-else-if="Item.type==='负面'" class="tagThree">{{Item.type}}</div>
                            <div v-else class="tag">{{Item.type}}</div>
                        </div>
                    </li>
                </ul>
                <div class="right" v-if="Item.image">
                    <img :src="Item.image" alt="newsPicture">
                </div>
            </div>
        </wioc-link-url>
    </section>

</template>

<script>
    export default {
        name: 'wioc-new-list',
        props:{
            dataList:{
                type:Array,
            },
            isTag:{
                type:Boolean,
                default:true
            }
		},
        data() {
            return {
               ifType:this.isTag,
            }
        },
        watch:{
    },
        methods:{

        }
    }
</script>

<style lang="less" scoped>
    .news {
        display: flex;
        flex-direction: row;
        height: 0.94rem;
        border-bottom: 0.01rem solid #f0f0f0;
        .left{
            //flex:1;
            padding-right: 0.05rem;
            box-sizing: border-box;
            margin-top: 0.15rem;
            .firli{
                white-space: nowrap;
                font-size: 0.15rem;
                text-overflow: ellipsis;
                overflow: hidden;
                //width: 70%;
                //width: 95%;
                line-height: 0.21rem;
                font-family:PingFangSC-Regular;
                color:#595959;
                letter-spacing:-0.07px;
                text-align:left;
            }
            .secli{
                display: flex;
                padding-top: 0.1rem;
                justify-content: space-between;
                line-height: 0.16rem;
                .time{
                    font-size: 0.11rem;
                    font-family:PingFangSC-Regular;
                    color:#c0c4cc;
                    letter-spacing:-0.05px;
                    text-align:left;
                    line-height: 0.16rem;
                }
                .tag,.tagTwo,.tagThree{  //无价值
                    font-family: PingFangSC-Regular;
                    font-size: 0.11rem;
                    letter-spacing: -0.07px;
                    padding: 0 0.05rem 0 0.05rem;
                    border-radius: 0.1rem;
                    text-align: center;
                    line-height: 0.16rem;
                    margin-right: 0.05rem;
                }
                .tag{background: #d9ebfc; color: #7cade2;}
                .tagTwo{  //高价值
                    background: #dbf8f4;
                    color: #63ba96;
                }
                .tagThree{ //负面
                    background: #fcd0d0;
                    color: #f66464;
                }
            }
        }
        .right{
            //  flex: 1;
            width: 35%;
            img{
                // width: 1.06rem;
                height: 0.67rem;
                width: 100%;
                border-radius: 0.05rem;
                margin: 0.12rem 0 0.12rem 0;
            }
        }

    }
</style>
